<template>
    <div class="brand-filter">
        <a class="brand-filter-item" v-for="item in firstWords" href="javascript:void(0);" :class="item.key == value?'active':''" @click="select(item)">{{item.value}}</a>
        <slot name="input"></slot>
    </div>
</template>
<script>
export default {
    props: ['letters'],
    created () {
        this.letters = this.letters.sort()
        this.firstWords = [{ key: '-1', value: '全部品牌' }]
        for (let item of this.letters) {
            if (item) {
                this.firstWords.push({
                    key: item.toLowerCase(),
                    value: item.toUpperCase(),
                })
            } else {
                this.firstWords.push({
                    key: '',
                    value: '#',
                })
            }
        }
    },
    data () {
        return {
            value: '-1',
            firstWords: [],
        }
    },
    methods: {
        select (item) {
            if (this.value !== item.key) {
                this.value = item.key
                this.$emit('firstLetterSelect', this.value)
            }
        },
    },
}
</script>

<style lang="scss">
.brand-filter {
    .brand-filter-item {
        padding: 0 3px;
        margin: 0 1px 5px;
        color: #777;
        min-width: 18px;
        line-height: 20px;
        font-size: 12px;
        text-align: center;
        border: 1px solid transparent;
        text-decoration: none;
        display: inline-block;
        &:hover {
            border: 1px solid #337ab7;
        }
    }
    >.active {
        border: 1px solid #00a2ff!important;
        color: #00a2ff;
    }
    input {
        display: inline-block;
        width: 175px;
        font-size: 12px;
        padding: 0px 10px;
        border-radius: 0;
        height: 28px;
    }
}
</style>